<template>
	<view class="uploading-page-main">
		<view class="edit-content">
			<view class="equipment_text">
				填写内容
			</view>
			<textarea class="textarea" v-model="content" auto-height placeholder="请输入140个字以内的内容" />
		</view>
		<view class="image-record">
			<view class="equipment_text">
				影像记录
			</view>
			<view class="global_box content">
				<view class="item1">
					<view class="title">拍照</view>
					<view class="content-body" style="display: flex;">
						<view v-for="(item, index) in imgPathList" :key="index">
							<image class="uploadImg mr20" :src="item" mode="aspectFit|aspectFill|widthFix"
								lazy-load="false">
							</image>
						</view>
						<image v-if="uploadStauts && checkObj.stepDefineFlag=='execute_step' && imgPathList.length < 3"
							class="uploadImg mr20 mt15" src="https://fireware-1257276602.cos.ap-guangzhou.myqcloud.com/bus/camera01.png" mode="aspectFit|aspectFill|widthFix"
							lazy-load="false" @click="tapchoosePhoto1"></image>
					</view>

				</view>
				<view class="item2">
					<view class="title">
						录制视频
					</view>
					<view class="content-body" style="display: flex;">
						<view v-for="(item, index) in videoPathList" :key="index">
							<video :id="'video-'+index" class="uploadImg mr20" @play="playHandle('video-'+index)"
								@fullscreenchange="fullscreenchange" :src="item" controls="true">
							</video>
						</view>
						<image v-if="uploadStauts && checkObj.stepDefineFlag=='execute_step' && videoPathList.length<1"
							class="uploadImg mr20 mt15" src="https://fireware-1257276602.cos.ap-guangzhou.myqcloud.com/bus/camera01.png" mode="aspectFit|aspectFill|widthFix"
							lazy-load="false" @click="tapchoosePhoto2"></image>
					</view>
				</view>
			</view>
		</view>
		<view v-if="checkObj.stepDefineFlag=='execute_step'" class="footer" @click="submitAppearHandle">
			提交
		</view>
	</view>
</template>

<script>
	import {
		baseUrl,
		request
	} from '../../request/index.js'
	export default {
		data() {
			return {
				bj_img: 'https://fireware-1257276602.cos.ap-guangzhou.myqcloud.com/fsw-wx-lmini/icons/uploadImg.png',
				imgPathList: [], //  保留数据
				videoPathList: [],
				imgPaths: [], //  上传数据
				videoPaths: [],
				content: "",
				checkObjData: {},
				checkObj: {},
				uploadStauts: true,
				videoContext: {}
			}
		},
		onLoad(options) {
			this.checkObjData = JSON.parse(options.item)
			this.checkObj = JSON.parse(options.checkObj)
			this.videoPathList = this.checkObjData.paramMap.videoPaths || []
			this.videoPaths = this.checkObjData.paramMap.videoPaths || []
			this.imgPathList = this.checkObjData.paramMap.imgPaths || []
			this.imgPaths = this.checkObjData.paramMap.imgPaths || []
			this.content = this.checkObjData.paramMap.content

			if (JSON.stringify(this.checkObjData.paramMap) !== '{}' && Object.keys(this.checkObjData.paramMap).length) {
				//  判断如果是否已经上传过
				this.uploadStauts = false
			}
		},
		methods: {
			tapchoosePhoto1(e) {
				const that = this
				uni.chooseMedia({
					count: 3,
					mediaType: ['image'],
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					camera: 'back',
					success(res) {
						that.btndetermine(res.tempFiles, 1)
					}
				})
			},
			tapchoosePhoto2(e) {
				const that = this
				uni.chooseMedia({
					count: 3,
					mediaType: ['video'],
					sizeType: ['original', 'compressed'],
					sourceType: ['camera'],
					maxDuration: 15,
					camera: 'back',
					success(res) {
						that.btndetermine(res.tempFiles, 2)
					}
				})
			},
			playHandle(id) {
				this.videoContext = uni.createVideoContext(id, this)
				this.videoContext.play()
				this.videoContext.requestFullScreen()
			},
			async submitAppearHandle() {
				const res = await request({
					url: "api/oct/wemini/bus/workOrder/uploadWorkOrderObjectDetail",
					method: "POST",
					data: {
						id: this.checkObjData.id,
						info: {
							content: this.content,
							imgPaths: this.imgPaths,
							videoPaths: this.videoPaths
						}
					}
				})
				if (res.status == 0) {
					let routes = getCurrentPages();
					let curRoute = routes[routes.length - 2]
					await curRoute.$vm.getWorkDetailHandle()
					curRoute.$vm.getButtonPermission()
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.showToast({
						title: "上报内容请求失败!",
						icon: 'none',
						duration: 2000
					})
				}
			},
			//退出全屏时停止播放
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					this.videoContext.stop()
				}
			},
			async btndetermine(paths, type) {
				// type 1 =>照片 type 2 =>视频
				if (paths.length === 0) {
					await showToast({
						title: '请先选择图片或者视频'
					})
					return
				}
				let images = []
				let that = this
				for (var i = 0; i < paths.length; i++) {
					uni.uploadFile({
						url: `${baseUrl}/api/oct/wemini/file/upload`,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
							openid: uni.getStorageSync("openid") || "oRekA4wN8O7hyfAlgdRNl4ughrm4"
						},
						filePath: paths[i].tempFilePath, // 文件临时路径；
						name: 'file', // 文件名，可以随便写
						formData: {
							type: 'image',
							model: 'task'
						},
						success: function(res) {
							if (res.statusCode === 200) {
								let data = JSON.parse(res.data)
								images.push(data.payload)
							}
							if (images.length === paths.length) {
								if (type == 1) {
									that.imgPathList = [...that.imgPathList, ...paths.map(item =>
										item.tempFilePath)]
									that.imgPaths = [...that.imgPaths, ...images]
								} else if (type == 2) {
									that.videoPathList = [...that.videoPathList, ...paths.map(item =>
										item.tempFilePath)]
									that.videoPaths = [...that.videoPaths, ...images]
								}

							}
						}
					})
				}
			},
		}
	}
</script>

<style lang="less">
	.uploading-page-main {
		padding: 0 30rpx;
		background-color: #f2f6ff;
		overflow: hidden;
		position: relative;
		height: 100vh;

		video,
		image {
			width: 80rpx !important;
			height: 80rpx !important;
			margin-top: 32rpx !important;
		}

		.textarea {
			padding: 20rpx;
			box-sizing: border-box;
			width: 90vw;
			height: 350rpx !important;
			background-color: #fff;
			border-radius: 10rpx;
		}

		.image-record {
			.content {
				height: 390rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.item1,.item2 {
					.content-body {
						display: flex;
						height: 120rpx;
					}
				}
			}
		}

		.footer {
			position: absolute;
			left: 0;
			bottom: 0;
			height: 88rpx;
			width: 100%;
			background-color: #6892fa;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>